<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('finance.successList')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item prop="orderId" label="">
                            <el-input v-model="form.orderId" :placeholder="$t('common.innerOrderId')" clearable><!--内部订单号--></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userPhone" label="">
                            <el-input v-model="form.userPhone" :placeholder="$t('common.mobileNumber')" clearable><!--手机号码--></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="withdrawAccount" label="">
                            <el-input v-model="form.withdrawAccount" :placeholder="$t('common.receiptAccount')" clearable><!--收款账号--></el-input>
                        </el-form-item>
                    </el-col>
                    <!--<el-col :span="4">
                        <el-form-item prop="thirdPartyOrderId" label="">
                            <el-input v-model="form.thirdPartyOrderId" :placeholder="$t('common.paymentId')" clearable>&lt;!&ndash;支付ID&ndash;&gt;</el-input>
                        </el-form-item>
                    </el-col>-->
                    <el-col :span="4">
                        <el-form-item prop="userId" label="">
                            <el-input v-model="form.userId" placeholder="UserId" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="controlNumber" label="">
                            <el-input v-model="form.controlNumber" :placeholder="$t('common.loanSerialNumber')" clearable><!--放款序列号--></el-input>
                        </el-form-item>
                    </el-col>
                    <!--放款渠道-->
                    <el-col :span="4">
                        <el-form-item prop="channelCompany" label="">
                            <el-select v-model="form.channelCompany" :placeholder="$t('common.loanChannel')" clearable style="width: 100%">
                                <el-option v-for="item in keyMap.loanChannelList" :key="item.value" :value="item.value" :label="item.label"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">

                    <!--<el-col :span="6">
                        <el-form-item prop="applyTime" label="">&lt;!&ndash;申请时间&ndash;&gt;
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.applyTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.applyStartTime')"
                                    :end-placeholder="$t('common.applyEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>-->
                    <el-col :span="8">
                        <el-form-item prop="loanCmplTime" label=""><!--放款时间-->
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.loanCmplTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.loanStartTime')"
                                    :end-placeholder="$t('common.loanEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="transTime" label="">
                            <!--交易开始时间 交易还款结束时间-->
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.transTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.transStartTime')"
                                    :end-placeholder="$t('common.transEndTime')">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="withdrawTime" label="">
                            <!--取现时间-->
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.withdrawTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.cashWithdrawalTimeStart')"
                                    :end-placeholder="$t('common.cashWithdrawalTimeEnd')">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="backStatus" label=""><!--退回状态-->
                            <el-select v-model="form.backStatus" clearable :placeholder="$t('finance.returnStatus')" style="width: 100%;">
                                <el-option key="1" :label="$t('finance.returning')" :value="1"></el-option>
                                <el-option key="0" :label="$t('finance.unreturn')" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="withdrawStatus" label=""><!--是否取款-->
                            <el-select v-model="form.withdrawStatus" clearable :placeholder="$t('finance.isWithdraw')" style="width: 100%;">
                                <el-option key="1" :label="$t('common.yes')" :value="1"></el-option>
                                <el-option key="0" :label="$t('common.no')" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4"> <!--放款方式-->
                        <el-form-item prop="withdrawChannels" label="">
                            <el-select v-model="form.withdrawChannels" multiple clearable :placeholder="$t('common.loanType')" style="width: 100%;">
                                <el-option v-for="item in keyMap.loanChannel" :key="item.value" :label="item.label" :value="item.value"></el-option>
<!--                                <el-option key="1" label="M Lhuillier" value="1"></el-option>
                                <el-option key="3" label="Palawan Pawnshop" value="3"></el-option>
                                <el-option key="4" label="ECPay" value="4"></el-option>
                                <el-option key="5" label="Bank" value="5"></el-option>
                                <el-option key="6" label="GCash" value="6"></el-option>
                                <el-option key="7" label="Coins" value="7"></el-option>
                                <el-option key="9" label="RD Pawnshop" value="9"></el-option>
                                <el-option key="10" label="Sevven_Corporation" value="10"></el-option>
                                <el-option key="100" label="BALANCE" value="100"></el-option>
                                <el-option key="99" label="Others" value="99"></el-option>-->
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- 伪名 -->
                    <el-col :span="4">
                        <el-form-item prop="whiteProductName" v-if="domain == 'Bene'"> <!---->
                            <el-input v-model="form.whiteProductName" :placeholder="$t('common.productName')" clearable><!----></el-input>
                        </el-form-item>
                        <el-form-item prop="kana" v-else> <!--姓名-->
                            <select-kana-list v-model="form.kana" :multiple="false" :placeholder="$t('finance.pseudonym')"></select-kana-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <!--放款类型-->
                    <el-col :span="4">
                        <el-form-item prop="applyType" label="">
                            <el-select v-model="form.applyType" :placeholder="$t('common.loanTypeMode')" clearable style="width: 100%">
                                <el-option v-for="item in keyMap.loanType" :key="item.value" :value="item.value" :label="item.label"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button @click="search" icon="el-icon-search" type="primary">{{ $t('common.search') }}</el-button>
                            <el-button @click="exportExcel" :disabled="tableData.length<=0" icon="el-icon-upload2" type="primary">{{ $t('common.export') }}</el-button>
                            <el-button v-if="showFallbackSetBtn" @click="setHandler" type="primary">{{ $t('finance.fundBackSet') }}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form><!--el-form end-->
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" style="width: 100%;" :highlight-current-row="true" :max-height="tableMaxHeight">
                        <el-table-column :label="$t('common.operation')" :min-width="$i18n.locale==='zhCN'?160:260">
                            <template slot-scope="{ row }">
                                <el-button v-if="row.withdrawChannel === 1 || row.withdrawChannel === 9" :disabled="row.isDisabledReturn === true" type="text" @click="beforeReturnHandler(row)">{{ $t('finance.returnHandler') }}</el-button>
                                <el-button v-if="row.withdrawChannel === 1 || row.withdrawChannel === 9" :disabled="row.isDisabledReturn === true" @click="editName(row)" type="text">{{ $t('common.editName') }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('common.loanVoucher')"><!--放款凭证-->
                            <template slot-scope="{ row }">
                                <el-button @click="changeVoucherVisible(row)" type="text">{{ $t('common.check') }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="UserId" prop="userId"></el-table-column>
                        <el-table-column :label="$t('common.name')" prop="userName" min-width="160"><!--姓名--></el-table-column>
                        <el-table-column :label="$t('common.mobileNumber')" prop="userPhone" min-width="150"><!--手机号码--></el-table-column>
                        <el-table-column :label="$t('common.innerOrderId')" prop="orderId" min-width="200"><!--内部订单号--></el-table-column>
                        <el-table-column align="left" :label="$t('system.appName')" prop="appName" min-width="130"></el-table-column><!--APP名称-->
                        <!-- <el-table-column :label="$t('finance.pseudonym')" prop="kana" min-width="130"></el-table-column>伪名 -->

                        <el-table-column v-if="domain=='Bene'" :label="$t('finance.productName')" prop="whiteProductName" min-width="130"></el-table-column><!--伪名-->
                        <el-table-column v-else :label="$t('finance.pseudonym')" prop="kana" min-width="130"></el-table-column><!--伪名-->
                        
                        <el-table-column :label="$t('common.loanSerialNumber')" prop="controlNumber" min-width="150"><!--放款序列号--></el-table-column>
                        <el-table-column :label="$t('common.paymentId')" prop="thirdPartyOrderId" min-width="200"></el-table-column><!--“放款订单号”改为“支付ID”-->
                        <el-table-column :label="$t('common.contractAmount')" prop="contractAmount" min-width="120">
                            <template slot-scope="{ row }">{{ row.contractAmount | formatCurrency }}</template><!--合同金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.borrowingCycle')" prop="loanPeriod" min-width="120">
                            <template slot-scope="{ row }">{{ row.loanPeriod }}{{ $t('common.day') }}</template><!--借款周期-->
                        </el-table-column>
                        <el-table-column :label="$t('common.loanAmount')" prop="loanAmount" min-width="120">
                            <template slot-scope="{ row }">{{ row.loanAmount | formatCurrency }}</template><!--放款金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.loanFee')" prop="loanFee" min-width="120">
                            <template slot-scope="{ row }">{{ row.loanFee | formatCurrency }}</template><!--放款手续费-->
                        </el-table-column>
                        <el-table-column :label="$t('common.actualLoanAmount')" prop="loanAmount" min-width="120">
                            <template slot-scope="{ row }">{{ row.loanAmount+row.loanFee | formatCurrency }}</template><!--实际出账金额-->
                        </el-table-column>
                        <el-table-column :label="$t('finance.beheadedInterest')" prop="headInterest" min-width="120">
                            <template slot-scope="{ row }">{{ row.headInterest | formatCurrency }}</template> <!--砍头息费-->
                        </el-table-column>

                        <el-table-column :label="$t('common.loanChannel')" prop="channelCompany" min-width="180"><!--放款渠道-->
                            <template slot-scope="{ row }">{{ row.channelCompany | SwitchChannelCompany }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.loanType')" prop="withdrawChannel" min-width="180"><!--放款方式-->
                            <template slot-scope="{ row }">{{ row.withdrawChannel | SwitchLoanChannel }}</template>
                        </el-table-column>

                        <el-table-column :label="$t('common.applyDate')" prop="applyTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.applyTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--申请日期-->
                        </el-table-column>
                        <el-table-column :label="$t('common.loanTime')" prop="loanTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.loanTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--放款时间-->
                        </el-table-column>
                        <el-table-column :label="$t('common.loanCompleteTime')" prop="loanCompletionTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.loanCompletionTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</template><!--放款完成时间-->
                        </el-table-column>
                        <el-table-column :label="$t('common.cashWithdrawalTime')" prop="withdrawTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.withdrawTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--取现时间-->
                        </el-table-column>
                        <el-table-column :label="$t('common.transTime')" prop="transTime" min-width="180"><!--交易时间-->
                            <template slot-scope="{ row }">{{ row.transTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.receiptAccount')" prop="withdrawAccount" min-width="180"><!--收款账号--></el-table-column>
                        <el-table-column :label="$t('common.receiptAccountBank')" prop="withdrawAccountBank" min-width="150"></el-table-column><!--收款账号所属银行-->

                        <el-table-column :label="$t('common.leadingActionType')" prop="loanType" min-width="140">
                             <template slot-scope="{ row }">{{ row.loanType | SwitchLeadingActionType }}</template><!--放款动作类型-->
                        </el-table-column>
                        <el-table-column :label="$t('common.userType')" prop="userType" min-width="120">
                            <template slot-scope="{ row }">{{ row.userType | SwitchUserType }}</template><!--用户类型-->
                        </el-table-column>
                        <el-table-column :label="$t('finance.returnStatus')" prop="userType" min-width="120">
                            <template slot-scope="{ row }">{{ row.backStatus | SwitchReturnStatus }}</template><!--退回状态-->
                        </el-table-column>
                        <el-table-column :label="$t('common.loanTypeMode')" prop="applyType" min-width="180"><!--放款类型-->
                            <template slot-scope="{ row }">{{ row.applyType | SwitchLoanType }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.operation')" prop="lateFee" width="140" v-if="domain!='Bene'">
                            <template slot-scope="{ row }">
                                <el-button type="primary" @click="showChangeHandUpDialog(row)" :disabled="row.receiptType==2||row.cancelStatus==1||row.canOperation==0">{{$t('finance.changeHanduoBill')}}</el-button>
                            </template><!--操作-->
                        </el-table-column>
                        <el-table-column :label="$t('common.operatingTime')" prop="modifyTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.modifyTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--放款时间-->
                        </el-table-column>
                        <el-table-column :label="$t('common.operator')" prop="operatorName" min-width="180">
                        </el-table-column>
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div><!--module_content-->
            </div>
        </div><!--module_content-->

        <el-dialog :title="$t('finance.fundBackSet')" :visible.sync="setDialog.isVisible" width="600px">
            <el-form ref="setDialog.form" :model="setDialog.form" :rules="setDialog.rules" label-width="140px">
                <el-form-item :label="$t('common.applyDate') + ':'" prop="day">
                    <el-input v-model="setDialog.form.day" :maxlength="2" style="margin-right:10px;width:50px;"></el-input>{{ $t('finance.afterDaysReturn',{x: setDialog.form.day}) }}
                </el-form-item>
                <el-form-item :label="$t('finance.openStatus') + ':'">
                    <span v-if="setDialog.form.status == 1">{{ $t('common.open') }}</span>
                    <span v-else>{{ $t('common.close') }}</span>
                    <el-switch
                            v-model="setDialog.form.status"
                            :active-value="1"
                            :inactive-value="0" style="margin-left:10px;">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="primary" @click="setSubmit">{{ $t('common.submit') }}</el-button>
                <el-button type="cancel" @click="setDialog.isVisible = false">{{ $t('common.cancel') }}</el-button>
            </div>
        </el-dialog>

        <!--回退原因弹框-->
        <el-dialog :title="$t('common.returnReason')" :visible.sync="returnReasonDialog.isVisible" width="400px">
            <el-form ref="returnReasonDialog.form" :model="returnReasonDialog.form" :rules="returnReasonDialog.rules" >
                <el-form-item prop="refuseRemark">
                    <el-input v-model="returnReasonDialog.form.refuseRemark" :maxlength="100" type="textarea" :rows="4"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="primary" @click="returnHandler">{{ $t('common.confirmOk') }}</el-button>
                <el-button type="cancel" @click="returnReasonDialog.isVisible = false">{{ $t('common.cancel') }}</el-button>
            </div>
        </el-dialog>

        <!-- 修改姓名 -->
        <el-dialog :title="$t('common.editName')" :visible.sync="showEditName" width="460px" :close-on-click-modal="false">
            <el-form :model="nameForm">
                <el-form-item label="Last Name">
                    <el-input v-model.trim="nameForm.lastName" placeholder="Last Name" type="text" maxlength="50"></el-input>
                </el-form-item>
                <el-form-item label="First Name">
                    <el-input v-model.trim="nameForm.firstName" placeholder="First Name" type="text" maxlength="50"></el-input>
                </el-form-item>
                <el-form-item label="Middle Name">
                    <el-input v-model.trim="nameForm.middleName" placeholder="Middle Name" type="text" maxlength="50"></el-input>
                </el-form-item>
                <el-form-item>
                    <div v-show="nameForm.showErrorMsg" class="error_tips color_red">{{ $t('common.emptyNameTips') }}</div>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="showEditName=false" type="default">{{ $t('common.cancel') }}</el-button>
                <el-button @click="handleEditName" type="primary">{{ $t('common.modify') }}</el-button>
            </div>
        </el-dialog>
         <!---->
         <changeHandUpBillDialog @submint="changeBillSub" :data="rowData" ref="changeHandUpDialog"></changeHandUpBillDialog>
         <!-- 放款凭证 -->
         <downVouncherModal :visible.sync="voucherVisible" :orderId="orderId"/>
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import {keyMap} from '@/config';
    import SelectAppList from '@/components/select-app-list';
    import SelectKanaList from '@/components/select-kana-list';
    import changeHandUpBillDialog from '../components/change-hand-up-bill-dialog'
    import downVouncherModal from '@/components/down-vouncher-modal.vue'

    let that = null;
    export default {
        name: 'loanSuccessList',
        components: {
            changeHandUpBillDialog,
            Pagination,
            SelectAppList,
            SelectKanaList,
            downVouncherModal
        },
        mixins: [mixin],
        data() {
            const checkDays = (rule, value, callback) => {
                if (value < 1 || value > 99) {
                    callback(new Error(this.$tc('verify.plsInputRightDays')));
                } else {
                    callback();
                }
            };
            return {
                domain:'',
                rowData:{},
                form: {
                    orderId: '',
                    userPhone: '',
                    withdrawAccount: '',
                    userId: '',
                    applyTime: '',
                    loanCmplTime: '',
                    transTime:'',
                    thirdPartyOrderId: '',
                    controlNumber: '',
                    backStatus: '',
                    withdrawStatus: '',
                    appName: '',
                    kana:'',
                    whiteProductName:'',
                    withdrawChannels: [],
                    applyType:'',
                    withdrawTime: '',
                    channelCompany: ''
                },
                rules: {
                    orderId: [],
                    userPhone: [],
                    withdrawAccount: [],
                    userId: [],
                    applyTime: [],
                    loanCmplTime: [],
                    transTime:[],
                    thirdPartyOrderId: [],
                    controlNumber: [],
                    backStatus: [],
                    withdrawStatus: [],
                    withdrawChannels: [],
                    withdrawTime: [],
                    channelCompany: [],
                },
                keyMap,
                setDialog: {
                    isVisible: false,
                    form: {
                        day: null,
                        status: '',
                        id: '',
                    },
                    rules: {
                        day: [
                            {pattern: /^(-|\+)?\d+$/, message: this.$t('verify.plsInputRightDays'), trigger: 'blur'},
                            {validator: checkDays, trigger: "blur"}
                        ]
                    }
                },
                returnReasonDialog: {
                    isVisible: false,
                    form: {
                        refuseRemark: '',
                        orderId: ''
                    },
                    rules: {
                        refuseRemark: [
                            { required: true, message: this.$t('verify.plsInput') }
                        ]
                    }
                },
                showEditName: false,
                nameForm: {
                    firstName: '',
                    middleName: '',
                    lastName: '',
                    orderId: '',
                    showErrorMsg: false,
                },
                voucherVisible: false,
                orderId: null
            };
        },
        computed: {
            showFallbackSetBtn() {// 资金退回设置
                return this.$store.getters.checkUserAuthority('/finance/loan/success-list/fallback-setting');
            },
        },
        methods: {
            changeVoucherVisible (row) {
                this.orderId = row.orderId
                this.voucherVisible = true
            },
            changeBillSub(){
                this.getTableData();
            },
            showChangeHandUpDialog(data){
                this.rowData = data;
                this.$refs.changeHandUpDialog.changeDialog()
            },
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.finance.loan.successList(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.tableData.map( item => {
                            let isDisabledReturn = !!(item.withdrawTime || item.backStatus === 1);
                            return item.isDisabledReturn = isDisabledReturn;
                        })
                        this.setPage(data.page, this.page);
                        // 防止类似总共21条数据，第21条操作后变成20条数据，但请求页数依旧是第2页
                        if (this.tableData.length === 0 && page.currentPage > 1) {
                            this.getTableData({ currentPage: page.currentPage - 1 });
                        }
                    }
                });
            },
            search() {
                this.page.currentPage = 1;
                this.getTableData();
            },
            exportExcel() {
                const params = this.fillParams();
                const user = this.$storage.get('user');
                const language = this.$storage.getLocal('language');
                params.language = language;
                params.token = user.token;
                const {$apiConf} = this;
                const url = this.$urlUtil.fillParams(params, $apiConf.baseUrl + $apiConf.urlType.finance.loan.successExcel, ['page']);
                this.$openNewBlank(url);
            },
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    orderId: form.orderId,
                    userPhone: form.userPhone,
                    withdrawAccount: form.withdrawAccount,
                    userId: form.userId,
                    applyTimeStart: '',
                    applyTimeEnd: '',
                    loanCmplTimeStart: '',
                    loanCmplTimeEnd: '',
                    transTimeStart: '',
                    transTimeEnd: '',
                    withdrawTimeStart: '',
                    withdrawTimeEnd: '',
                    thirdPartyOrderId: form.thirdPartyOrderId,
                    controlNumber: form.controlNumber,
                    backStatus: form.backStatus,
                    withdrawStatus: form.withdrawStatus,
                    appName: form.appName,
                    kana:form.kana,
                    whiteProductName:form.whiteProductName,
                    channelCompany: form.channelCompany,
                    applyType:form.applyType,
                    withdrawChannel: form.withdrawChannels.join(), // 因为后端字段改动修改withdrawChannels为withdrawChannel
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
//                Object.keys(form).forEach(key => {
//                    if (typeof form[key] === 'string' && form[key]) {
//                        form[key] = form[key].trim();
//                        params[key] = form[key];
//                    }
//                });
                if (form.applyTime) {
                    params.applyTimeStart = form.applyTime[0];
                    params.applyTimeEnd = form.applyTime[1];
                }
                if (form.loanCmplTime) {
                    params.loanCmplTimeStart = form.loanCmplTime[0];
                    params.loanCmplTimeEnd = form.loanCmplTime[1];
                }
                if(form.transTime){
                    params.transTimeStart = form.transTime[0];
                    params.transTimeEnd = form.transTime[1];
                }
                if(form.withdrawTime){
                    params.withdrawTimeStart = form.withdrawTime[0];
                    params.withdrawTimeEnd = form.withdrawTime[1];
                }
                return params;
            },
            beforeReturnHandler(row) {
                this.returnReasonDialog.form.orderId = row.orderId;
                this.returnReasonDialog.form.refuseRemark = '';
                this.returnReasonDialog.isVisible = true;
                this.$nextTick( () => {
                    this.$refs['returnReasonDialog.form'].clearValidate();
                });
            },
            returnHandler() {
                this.$refs['returnReasonDialog.form'].validate(val => {
                    if (val) {
                        // row.isDisabledReturn = true;
                        const form = this.returnReasonDialog.form;
                        const params = {
                            orderId: form.orderId,
                            refuseRemark: form.refuseRemark
                        };
                        this.$api.finance.loan.backOrder(params).then(res => {
                            // row.isDisabledReturn = false;
                            const {status, error, msg} = res;
                            if ('1' === status && '00000000' === error) {
                                this.returnReasonDialog.isVisible = false;
                                this.getTableData();
                                this.$message.success(this.$t('common.successfulOperation'));
                            }
                            else if('1' === status && '00000000' !== error){
                                this.$message.error(msg || this.$t('common.failedOperation'));
                            }
                        });
                    }
                });
            },
            setHandler() {
                this.setDialog.form.status = '';
                this.setDialog.form.day = '';
                this.setDialog.form.id = '';
                this.$api.finance.loan.queryLoanOpenVersion().then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.setDialog.form.status = data.backOpen;
                        this.setDialog.form.day = data.backDays;
                        this.setDialog.form.id = data.id;
                        this.setDialog.isVisible = true;
                    }
                });
            },
            setSubmit() {
                this.$refs['setDialog.form'].validate((valid) => {
                    if (valid) {
                        const form = this.setDialog.form;
                        const params = {
                            backDays: form.day,
                            backOpen: form.status,
                            id: form.id
                        };
                        this.$api.finance.loan.updateLoanOpenVersion(params).then(res => {
                            const {status, error, msg} = res;
                            if ('1' === status && '00000000' === error) {
                                this.setDialog.isVisible = false;
                                this.$message.success(this.$tc('common.successfulOperation'));
                            }
                            else if('1' === status && '00000000' !== error){
                                this.$message.error(msg || this.$tc('common.failedOperation'));
                            }
                        });
                    }
                });
            },
            editName(row) {
                this.nameForm.firstName = '';
                this.nameForm.middleName = '';
                this.nameForm.lastName = '';
                this.nameForm.orderId = row.orderId;
                this.showEditName = true;
            },
            handleEditName() {
                const { firstName, middleName, lastName, orderId } = this.nameForm;
                if (!firstName && !middleName && !lastName) {
                    this.nameForm.showErrorMsg = true;
                    return;
                }
                const params = { firstName, middleName, lastName, orderId };
                this.$api.finance.loan.renamePayout(params).then(res => {
                    const { status, data } = res;
                    if ('1' === status && data) {
                        const { firstName, middleName, lastName } = data;
                        if (data.modifyStatus) {
                            // this.$message.success(this.$tc('common.modifySuccess')); // 修改成功
                            this.$alert(`
                                        <div>Last Name: ${lastName}</div>
                                        <div>First Name: ${firstName}</div>
                                        <div>Middle Name: ${middleName}</div>`,
                                this.$tc('common.modifySuccess'),
                                { dangerouslyUseHTMLString: true });
                        } else {
                            this.$message.error(data.remark || this.$tc('common.modifyFail')); // 修改失败
                        }
                        this.showEditName = false;
                        this.getTableData();
                    }
                });
            },
        },
        filters: {
            SwitchReturnStatus(status) {
                switch (status + '') {
                    case '1':
                        return that.$t('finance.returning');
                    case '0':
                        return that.$t('finance.unreturn');
                    default:
                        return status;
                }
            }
        },
        created() {
            this.domain = this.$storage.get('user').domain
            that = this;
            this.tableMaxHeight = document.body.clientHeight - 320;
            // this.getTableData();
        }
    }
</script>
<style lang="scss">
    [data-page=finance-loan-successList] {
        .el-col {
            padding-left: 10px;
        }
        .el-select__tags {
            .el-tag--small {
                height: 22px !important;
            }
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
    }
</style>
